<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                template="./../templates/StakeholderPortalTemplate.xhtml">

    <ui:define name="content"> 
        <f:view beforePhase="#{grouponManagerBean.initGrouponList}"></f:view>

        <h:form id="formMain">
            <h1>View Offered Groupons</h1>         

            <p:panel header="View Offered Groupons">
                <p:accordionPanel autoHeight="false">
                    <p:tab title="Currently Offered Groupons (Double-click to select)">
                        <p:dataTable var="currentGroupon" value="#{grouponManagerBean.currentlyOfferedGrouponList}" paginator="true" 
                                     rows="10" emptyMessage="No groupon is offered at the moment" selection="#{grouponManagerBean.selectedGroupon}" 
                                     selectionMode="single" rowSelectListener="#{grouponManagerBean.onRowStakeholderSelectNavigateGroupon}"
                                     dblClickSelect="true">

                            <p:column sortBy="#{currentGroupon.groupon.name}" filterBy="#{currentGroupon.groupon.name}">
                                <f:facet name="header">
                                    <h:outputText value="Name" />
                                </f:facet>
                                <h:outputText value="#{currentGroupon.groupon.name}" />
                            </p:column>

                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="Image" />
                                </f:facet>
                                <p:graphicImage id="imageDisplay" value="/images/upload/media/#{currentGroupon.groupon.imageURL}"
                                                height="50" width="70"/> 
                            </p:column>

                            <p:column sortBy="#{currentGroupon.groupon.offeredPrice}" filterBy="#{currentGroupon.groupon.offeredPrice}">
                                <f:facet name="header">
                                    <h:outputText value="Offered Price" />
                                </f:facet>
                                <h:outputText value="#{currentGroupon.groupon.offeredPrice} SGD" />
                            </p:column>

                            <p:column sortBy="#{currentGroupon.groupon.minimumIssuedQuantity}" filterBy="#{currentGroupon.groupon.minimumIssuedQuantity}">
                                <f:facet name="header">
                                    <h:outputText value="Minimum Quantity" />
                                </f:facet>
                                <h:outputText value="#{currentGroupon.groupon.minimumIssuedQuantity}" />
                            </p:column>

                            <p:column >
                                <f:facet name="header">
                                    <h:outputText value="Quantity Bought" />
                                </f:facet>
                                <h:outputText value="#{currentGroupon.quantityBought}" />
                            </p:column>


                            <p:column sortBy="#{currentGroupon.groupon.startDate}" filterBy="#{currentGroupon.groupon.startDate}">
                                <f:facet name="header">
                                    <h:outputText value="Start Selling Date" />
                                </f:facet>
                                <h:outputText value="#{currentGroupon.groupon.startDate}">
                                    <f:convertDateTime dateStyle="full" pattern="EEE, dd/MM/yyyy" timeZone="EST" type="date" />
                                </h:outputText>
                            </p:column>

                            <p:column sortBy="#{currentGroupon.groupon.endDate}" filterBy="#{currentGroupon.groupon.endDate}">
                                <f:facet name="header">
                                    <h:outputText value="End Selling Date" />
                                </f:facet>
                                <h:outputText value="#{currentGroupon.groupon.endDate}">
                                    <f:convertDateTime dateStyle="full" pattern="EEE, dd/MM/yyyy" timeZone="EST" type="date" />
                                </h:outputText>
                            </p:column>

                            <p:column sortBy="#{currentGroupon.groupon.status}" filterBy="#{currentGroupon.groupon.status}">
                                <f:facet name="header">
                                    <h:outputText value="Status" />
                                </f:facet>
                                <h:outputText value="#{currentGroupon.groupon.status}" />
                            </p:column>

                        </p:dataTable>
                    </p:tab>
                    <p:tab title="Offered Groupons (Double-click to select)">
                        <p:dataTable var="offeredGroupon" value="#{grouponManagerBean.offeredGrouponList}" paginator="true" 
                                     rows="10" emptyMessage="No groupon has been offered" selection="#{grouponManagerBean.selectedGroupon}" 
                                     selectionMode="single" rowSelectListener="#{grouponManagerBean.onRowStakeholderSelectNavigateGroupon}"
                                     dblClickSelect="true">

                            <p:column sortBy="#{offeredGroupon.groupon.id}" filterBy="#{offeredGroupon.groupon.id}">
                                <f:facet name="header">
                                    <h:outputText value="ID" />
                                </f:facet>
                                <h:outputText value="#{offeredGroupon.groupon.id}" />
                            </p:column>

                            <p:column sortBy="#{offeredGroupon.groupon.name}" filterBy="#{offeredGroupon.groupon.name}">
                                <f:facet name="header">
                                    <h:outputText value="Name" />
                                </f:facet>
                                <h:outputText value="#{offeredGroupon.groupon.name}" />
                            </p:column>

                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="Image" />
                                </f:facet>
                                <p:graphicImage id="imageDisplay" value="/images/upload/media/#{offeredGroupon.groupon.imageURL}"
                                                height="50" width="70"/> 
                            </p:column>

                            <p:column sortBy="#{offeredGroupon.groupon.offeredPrice}" filterBy="#{offeredGroupon.groupon.offeredPrice}">
                                <f:facet name="header">
                                    <h:outputText value="Offered Price" />
                                </f:facet>
                                <h:outputText value="#{offeredGroupon.groupon.offeredPrice} SGD" />
                            </p:column>

                            <p:column sortBy="#{offeredGroupon.groupon.minimumIssuedQuantity}" filterBy="#{offeredGroupon.groupon.minimumIssuedQuantity}">
                                <f:facet name="header">
                                    <h:outputText value="Minimum Quantity" />
                                </f:facet>
                                <h:outputText value="#{offeredGroupon.groupon.minimumIssuedQuantity}" />
                            </p:column>

                            <p:column sortBy="#{offeredGroupon.groupon.startDate}" filterBy="#{offeredGroupon.groupon.startDate}">
                                <f:facet name="header">
                                    <h:outputText value="Start Selling Date" />
                                </f:facet>
                                <h:outputText value="#{offeredGroupon.groupon.startDate}">
                                    <f:convertDateTime dateStyle="full" pattern="EEE, dd/MM/yyyy" timeZone="EST" type="date" />
                                </h:outputText>
                            </p:column>

                            <p:column sortBy="#{offeredGroupon.groupon.endDate}" filterBy="#{offeredGroupon.groupon.endDate}">
                                <f:facet name="header">
                                    <h:outputText value="End Selling Date" />
                                </f:facet>
                                <h:outputText value="#{offeredGroupon.groupon.endDate}">
                                    <f:convertDateTime dateStyle="full" pattern="EEE, dd/MM/yyyy" timeZone="EST" type="date" />
                                </h:outputText>
                            </p:column>

                            <p:column sortBy="#{offeredGroupon.groupon.status}" filterBy="#{offeredGroupon.groupon.status}">
                                <f:facet name="header">
                                    <h:outputText value="Status" />
                                </f:facet>
                                <h:outputText value="#{offeredGroupon.groupon.status}" />
                            </p:column>
                        </p:dataTable>
                    </p:tab> 
                </p:accordionPanel> 
            </p:panel>
        </h:form>
    </ui:define>
</ui:composition>